<template>
  <div class='header'>
    <div class="container">
      <div>
        <el-icon>
          <router-link to="/userinfo">
            <Back/>
          </router-link>
        </el-icon>
      </div>
      <span>我的行程</span>
    </div>
  </div>


  <ul class="list">
    <template v-for="(trip, index) in trips" :key="index">
      <li v-show="trip.status != `已完成`" @click="skip(trip)">
        <el-card class="tripCard" style="line-height: 2;">
          <p>行程路线：{{ trip.route }}</p>
          <p>出发时间：{{ trip.start_date }} &nbsp;&nbsp; {{
              trip.start_time
            }}</p>
          <p style=" width: 80%;display: flex; justify-content: space-between;">
            <span><span class="red">{{
                trip.num_passengers
              }}人</span>/{{ trip.max_seat_capacity }}座</span>
            <span><span class="red">{{ trip.price }}元</span>/位</span>
          </p>
          <p>状态：<span :style="{ color: statusColor }">{{ trip.status }}</span></p>
        </el-card>
      </li>
    </template>
  </ul>
</template>
<script setup>
import {ref, computed, onMounted} from 'vue'
import request from "@/utils/request";
import {useRouter} from 'vue-router';
import {useCounterStore} from '@/stores/counter'

const router = useRouter();
const userInfo = ref({});
const trips = ref([])
const store = useCounterStore();  // 使用 Vuex Store

const statusColor = computed(() => {
  if (trips.status === '行程中') {
    return 'green';
  } else if (trips.status === '等待乘客') {
    return 'yellow';
  } else {
    return 'red';
  }
});


//获取本地用户信息
const parseUserInfo = () => {
  const originalString = localStorage.getItem("user")
  var newStr = originalString.substring(31, originalString.length - 1); // 从索引12开始，截取到字符串末尾的前一个字符，即去掉 "]"
  // 去掉字符串两侧的空格，并替换其中的等号和单引号为对应的JSON字符
  var newStr = newStr.replace(/=/g, ':').replace(/'/g, '"');
  // 在字符串开头和结尾添加大括号，使其成为一个完整的JSON对象
  let pairs = newStr.split(", ");
  let jsonObj = {};
  for (let i = 0; i < pairs.length; i++) {
    let keyValuePair = pairs[i].split(":");
    jsonObj[keyValuePair[0]] = keyValuePair[1];
  }
  let jsonStr = JSON.stringify(jsonObj);
  userInfo.value = JSON.parse(jsonStr);
}


parseUserInfo();
const userid = localStorage.getItem("userId");
const getMyTrip = () => {
  request.get(`/vehicle-trip/vehicleTrip/getMyTrip/${userid}`).then(result => {
        trips.value = result.data
        format(trips.value);
      }
  )
}

//时间戳转换
const format = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    const date = new Date(arr[i].start_date);
    const formattedDate = date.toISOString().slice(0, 10);  // 将日期格式化为年月日
    arr[i].start_date = formattedDate;
  }
}

//跳转路由
const skip = (data) => {
  store.skipData = data
  router.push({name: 'tripinformation'})
}
onMounted(() => {
  // const userid = localStorage.getItem("userId");
  getMyTrip();
})

</script>

<style lang='less' scoped>
.header {
  background-color: #BDDCFF;
  height: 60px;
  line-height: 60px;
  color: #495e77;
  padding: 0 12px;

}

.container {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.tripCard {
  margin: 20px 10px 20px 10px;
}

.list {
  height: 100%;
  overflow-y: auto;
  /* 当内容超出设置的最大高度时，会出现垂直滚动条 */
}

.red {
  color: red;
}
</style>
